﻿
.metroBig {
}

.live-tile, .list-tile {
    float: left;
    margin: 15px;
    overflow: hidden;
    position: relative;
}

    .live-tile.two-wide, .list-tile.two-wide {
    }

    .live-tile.two-tall, .list-tile.two-tall {
    }

    .live-tile img, .list-tile img {
        border: none;
    }

    .live-tile.me > .slide-back > a.metroBig {
        position: absolute;
        left: 0;
        bottom: 0;
        padding: 0 0 12px 12px;
        text-decoration: none;
    }

    .live-tile a:link, .live-tile a:visited {
        color: #fff;
        text-decoration: underline;
    }

    .live-tile a:hover {
        color: #fff;
        text-decoration: none;
    }

    .live-tile p {
        font-size: 13px;
        line-height: 16px;
        padding: 10px;
    }

    .live-tile .tile-title, .list-tile .tile-title {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 6px 0 6px 6px;
        z-index: 30;
        background-color: #333333;
        color: #ffffff;
        opacity: .80;
        filter: alpha(opacity=80);
    }

    .live-tile a.tile-title, .list-tile a.tile-title {
    }

    .live-tile.me > .metroBig {
        padding-top: 45px;
    }

    .live-tile, .live-tile > div, .list-tile > div { /* ensure elements on backside don't continue to take focus */
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
    }

        .live-tile > div, .list-tile > div {
            top: 0;
            left: 0;
            margin: 0;
            height: 100%;
            width: 100%;
            position: absolute;
            z-index: 20;
        }

    .list-tile > div {
        position: relative;
        background-color: transparent;
    }

img.full, a.full {
    display: block;
    margin: 0;
    height: 100%;
    width: 100%;
}

.live-tile > .back, .live-tile > .slide-back, .live-tile > .flip-back, .flip-list .flip-back {
    position: absolute;
    z-index: 10;
}
/*  ========== flip-list Styles ==========
	.flip-list
	---li
	------div.flip-front
	------div.flip-back
*/
.flip-list {
    padding: 0;
    margin: 0;
}

.list-tile .flip-list {
    height: 100%;
    width: 100%;
}

.flip-list > li > a {
    border: none;
    outline: none;
    text-decoration: none;
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}

.flip-list img {
    border: none;
    outline: none;
    height: 100%;
    margin: 0;
    padding: 0;
    width: 100%;
}

.flip-list > li {
    height: 60px;
    float: left;
    list-style-type: none;
    margin: 0;
    outline: none;
    padding: 0;
    position: relative;
    width: 60px;
}

    .flip-list > li > div {
        border: none;
        background: white;
        height: 100%;
        left: 0;
        margin: 0;
        overflow: hidden;
        position: absolute;
        padding: 0;
        top: 0;
        width: 100%;
        z-index: 20;
    }

        .flip-list > li > div.flip-back {
            height: 0;
        }



.live-tile.flip {
    background: none;
}

/* flip-list tile grid sprite styles */
.nineTiles {
    /* set a default image here
	background-image:url('/content/images/yourimage.jpg');  
	*/
}

.flip-list.nineTiles > li, .flip-list.nineTiles > li > div, .flip-list.nineTiles > li > div > img, .flip-list.nineTiles > li > div > a {
    height: 60px;
    width: 60px;
    border: none;
    padding: 0;
    margin: 0;
}

.nineTiles1 {
    background-position: 0 0;
}

.nineTiles2 {
    background-position: -60px 0;
}

.nineTiles3 {
    background-position: -120px 0;
}

.nineTiles4 {
    background-position: 0 -60px;
}

.nineTiles5 {
    background-position: -60px -60px;
}

.nineTiles6 {
    background-position: -120px -60px;
}

.nineTiles7 {
    background-position: 0 -120px;
}

.nineTiles8 {
    background-position: -60px -120px;
}

.nineTiles9 {
    background-position: -120px -120px;
}

.fourTiles {
}

.flip-list.fourTiles > li, .flip-list.fourTiles > li > div, .flip-list.fourTiles > li > div > img, .flip-list.fourTiles > li > div > a {
    border: none;
    padding: 0;
    margin: 0;
    height: 90px;
    width: 90px;
}

.fourTiles1 {
    background-position: 0 0;
}

.fourTiles2 {
    background-position: -90px 0;
}

.fourTiles3 {
    background-position: 0 -90px;
}

.fourTiles4 {
    background-position: -90px -90px;
}


/* ------ Hardware Accelerated CSS3 Animations --------*/
/* flip */
.flip-list > li > .ha.flip-back, .flip-list > li > .ha.flip-back img {
    /* override the values set for margin and ensure the back tile is visible  */
    margin: 0 !important;
    height: 100%;
}

.live-tile > .ha.flip-front, .flip-list > li > .ha.flip-front {
    position: absolute;
    /* time to start repeating ourselves 
	note: we are not setting a duration or delay here, 
	that is added in script */
    -webkit-animation-name: flipfront180;
    -webkit-animation-play-state: paused;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: flipfront180;
    -moz-animation-play-state: paused;
    -moz-animation-fill-mode: forwards;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: linear;
    -ms-animation-name: flipfront180;
    -ms-animation-play-state: paused;
    -ms-animation-fill-mode: forwards;
    -ms-animation-iteration-count: 1;
    -ms-animation-timing-function: linear;
    -o-animation-name: flipfront180;
    -o-animation-play-state: paused;
    -o-animation-fill-mode: forwards;
    -o-animation-iteration-count: 1;
    -o-animation-timing-function: linear;
    animation-name: flipfront180;
    animation-play-state: paused;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-timing-function: linear;
}

.live-tile > .ha.flip-back, .flip-list > li > .ha.flip-back {
    position: absolute;
    -webkit-animation-name: flipback180;
    -webkit-animation-play-state: paused;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: flipback180;
    -moz-animation-play-state: paused;
    -moz-animation-fill-mode: forwards;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: linear;
    -ms-animation-name: flipback180;
    -ms-animation-play-state: paused;
    -ms-animation-fill-mode: forwards;
    -ms-animation-iteration-count: 1;
    -ms-animation-timing-function: linear;
    -o-animation-name: flipback180;
    -o-animation-play-state: paused;
    -o-animation-fill-mode: forwards;
    -o-animation-iteration-count: 1;
    -o-animation-timing-function: linear;
    animation-name: flipback180;
    animation-play-state: paused;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-timing-function: linear;
}
